<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章</title>
		<link rel="stylesheet" href="../static/lib/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../static/lib/animate.css"/>
		<link rel="stylesheet" href="../static/css/global.css" />
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script type="text/javascript" src="../static/lib/layui/layui.js"></script>
	</head>
	<body>
		<!-- 头部导航栏 -->
		<div class="blog-header"></div>
		
		<div class="blog-content">
			<div class="layui-container">
				<div class="layui-row">
					<div class="layui-col-md8">
						<!-- 文章展示小卡片 -->
						<div class="article-card animated flipInX">
							<div class="article-title">
								<a href="details.html">基于SpringBoot的个人博客</a><span class="layui-badge layui-bg-green">原创</span>
							</div>
							<div class="article-abstract">
								<span>
									基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客.....
								</span>
							</div>
							<!-- 卡片底部展示发表时间、用户、分类 和 标签等-->
							<div class="article-bottom">
								<span>
									<i class="layui-icon layui-icon-time"></i>
									2020-04-18 01:25
								</span>
								<span>
									<i class="layui-icon layui-icon-username"></i>小郭啊
								</span>
								<span>
									<i class="fa fa-folder-o"></i>
									<a href="">springboot</a>&nbsp;&nbsp;
								</span>
								<span>
									<i class="layui-icon layui-icon-note"></i>
									&nbsp;<a href="">mysql</a>
									&nbsp;<a href="">mybatis</a>
									&nbsp;<a href="">springboot</a>
								</span>
								<span>
									<!-- 评论数和浏览数 -->
									<i class="fa fa-commenting-o"></i>10
									&nbsp;<i class="fa fa-eye"></i>1000
								</span>
							</div>
						</div>
						<div class="article-card animated zoomIn">
							<div class="article-title">
								<a href="">基于SpringBoot的个人博客</a><span class="layui-badge">转载</span>
							</div>
							<div class="article-abstract">
								<span>
									基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客.....
								</span>
							</div>
							<!-- 卡片底部展示发表时间、用户、分类 和 标签等-->
							<div class="article-bottom">
								<span>
									<i class="layui-icon layui-icon-time"></i>
									2020-04-18 01:25
								</span>
								<span>
									<i class="layui-icon layui-icon-username"></i>小郭啊
								</span>
								<span>
									<i class="fa fa-folder-o"></i>
									<a href="">springboot</a>&nbsp;&nbsp;
								</span>
								<span>
									<i class="layui-icon layui-icon-note"></i>
									&nbsp;<a href="">mysql</a>
									&nbsp;<a href="">mybatis</a>
									&nbsp;<a href="">springboot</a>
								</span>
								<span>
									<!-- 评论数和浏览数 -->
									<i class="fa fa-commenting-o"></i>10
									&nbsp;<i class="fa fa-eye"></i>1000
								</span>
							</div>
						</div>
						<div class="article-card animated zoomIn">
							<div class="article-title">
								<a href="">基于SpringBoot的个人博客</a><span class="layui-badge layui-bg-green">原创</span>
							</div>
							<div class="article-abstract">
								<span>
									基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客.....
								</span>
							</div>
							<!-- 卡片底部展示发表时间、用户、分类 和 标签等-->
							<div class="article-bottom">
								<span>
									<i class="layui-icon layui-icon-time"></i>
									2020-04-18 01:25
								</span>
								<span>
									<i class="layui-icon layui-icon-username"></i>小郭啊
								</span>
								<span>
									<i class="fa fa-folder-o"></i>
									<a href="">springboot</a>&nbsp;&nbsp;
								</span>
								<span>
									<i class="layui-icon layui-icon-note"></i>
									&nbsp;<a href="">mysql</a>
									&nbsp;<a href="">mybatis</a>
									&nbsp;<a href="">springboot</a>
								</span>
								<span>
									<!-- 评论数和浏览数 -->
									<i class="fa fa-commenting-o"></i>10
									&nbsp;<i class="fa fa-eye"></i>1000
								</span>
							</div>
						</div>
						<div class="article-card animated zoomIn">
							<div class="article-title">
								<a href="">基于SpringBoot的个人博客</a><span class="layui-badge layui-bg-green">原创</span>
							</div>
							<div class="article-abstract">
								<span>
									基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客基于SpringBoot的个人博客.....
								</span>
							</div>
							<!-- 卡片底部展示发表时间、用户、分类 和 标签等-->
							<div class="article-bottom">
								<span>
									<i class="layui-icon layui-icon-time"></i>
									2020-04-18 01:25
								</span>
								<span>
									<i class="layui-icon layui-icon-username"></i>小郭啊
								</span>
								<span>
									<i class="fa fa-folder-o"></i>
									<a href="">springboot</a>&nbsp;&nbsp;
								</span>
								<span>
									<i class="layui-icon layui-icon-note"></i>
									&nbsp;<a href="">mysql</a>
									&nbsp;<a href="">mybatis</a>
									&nbsp;<a href="">springboot</a>
								</span>
								<span>
									<!-- 评论数和浏览数 -->
									<i class="fa fa-commenting-o"></i>10
									&nbsp;<i class="fa fa-eye"></i>1000
								</span>
							</div>
						</div>
						<!-- 分页DIV -->
						<div id="page-util" class="page-box"></div>
					</div>
					<div class="layui-col-md4">
						<!-- 搜索栏 -->
						<div class="input-box animated bounceInRight">
							<input type="search" id="s_keyword" name="s_keyword" class="layui-input" placeholder="请输入搜索关键字"/>
							<button type="button" class="layui-btn" id="btn_search">
							  <i class="layui-icon layui-icon-search"></i>
							</button>
						</div>
						 <!-- 分类 -->
						<div class="base-card animated bounceInRight delay-1s">
							<div class="base-card-header">
								<i class="fa fa-folder-o"></i>
								分类
								<span style="float: right;">
									<a href="javascript:;">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
							</div>
							<div class="base-card-body">
								<div id="category-nav">
									<a href="">Redis</a>
									<a href="">SpringBoot</a>
									<a href="">mybatis</a>
									<a href="">mysql</a>
									<a href="">spring</a>
									<a href="">layui</a>
								</div>
							</div>
						</div>
						<!-- 标签 -->
						<div class="base-card animated bounceInRight delay-2s">
							<div class="base-card-header">
								<i class="layui-icon layui-icon-note"></i>
								标签
								<span style="float: right;">
									<a href="javascript:;">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
							</div>
							<div class="base-card-body">
								<div id="tags">
									<a href="">Layui</a>
									<a href="">SpringBoot</a>
									<a href="">算法</a>
									<a href="">Redis</a>
									<a href="">Mybatis</a>
									<a href="">mysql</a>
									<a href="">Redis</a>
									<a href="">Mybatis</a>
									<a href="">mysql</a>
								</div>
							</div>
						</div>
						
						<!-- 归档 -->
						<div class="base-card animated bounceInRight delay-3s">
							<div class="base-card-header">
								<i class="fa fa-archive"></i>
								归档
								<span style="float: right;">
									<a href="javascript:;">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
							</div>
							<div class="base-card-body">
								<div id="category-nav">
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 底部版权区 -->
		<div class="blog-footer"></div>
		
		<link rel="stylesheet" type="text/css" href="../static/css/article.css"/>	
		<script type="text/javascript" src="../static/js/article.js"></script>
		<script type="text/javascript" src="../static/js/global.js"></script>
	</body>
</html>
